<template>
  <div style="width: 100%;mix-height:500px;">
    <div v-for="item in myData" style="display: inline-block;margin-left: 50px;margin-top: 20px">
      <router-link @click="myClick(item.bookId)" :to="{path:'/bookDetail',query:{id: item.bookId}}">
        <BookSingle :book-data="item"></BookSingle>
      </router-link>
    </div>
  </div>
</template>

<script setup>

import BookSingle from "../Slither/BookSingle.vue";
import {provide} from "vue";

const myProps = defineProps({
  myData: {
    type: Array,
    default: [
      {
        bookId: 1,
        bookName: '我是鲁滨逊',
        bookPicture: '',
        author: "鲁滨逊",
        price: 33.8,
        grade: 3
      }
    ]
  }
})

const myClick = (bookId)=>{
  console.log("点击了" + bookId)
}

</script>

<style scoped>
a{
  text-decoration: none;
  color: black;
}
</style>
